<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:26:38
 * @LastEditTime: 2022-06-30 15:48:31
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/device-manager/TeamManager.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div class="header">
      <div class="header-item" style="display: flex">
        <div class="header-item-title">分组名称:</div>
        <div class="header-item-input">
          <input type="text" placeholder="请输入分组名称" />
        </div>
      </div>
      <div class="header-item" style="display: flex">
        <div class="header-item-title">所属机构:</div>
        <div class="header-item-select">
          <select @change="choosePx($event)">
            <option
              :value="item"
              v-for="(item, index) in state.mechanism"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </div>
      </div>
      <div class="header-button">
        <button class="header-button-item1">重 置</button>
        <button class="header-button-item2">查 询</button>
      </div>
    </div>
    <div class="content">
      <div class="content-btn">
        <div class="content-btn-item1">
          <!-- <button>建立分组</button> -->
          <!-- 弹窗表格 -->
          <el-button
            class="bbb"
            style="float: right; width: 80px"
            type="primary"
            @click="goAddGroup"
            >建立分组</el-button
          >
          <el-dialog
            title="新建分组"
            v-model="state.dialogFormVisible"
            width="70%"
          >
            <el-divider style="margin-top: -30px" />
            <el-form :model="state.form" :inline="true">
              <el-form-item label="分组名称：">
                <el-input
                  v-model="state.form.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="所属机构" label-width="150px">
                <el-select
                  v-model="state.form.region"
                  placeholder="请选择所属机构"
                >
                  <el-option label="机构一" value="first"></el-option>
                  <el-option label="机构二" value="second"></el-option>
                </el-select>
              </el-form-item>
              <!-- <br /> -->
              <el-form-item
                label="描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述："
              >
                <el-input
                  class="des"
                  v-model="state.form.desc"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <br />
              <el-form-item label="设备选择："> </el-form-item>
            </el-form>
            <!-- 设备选择 -->
            <div class="chooseM">
              <div style="display: flex">
                <el-form :model="state.form" :inline="true">
                  <el-form-item>
                    <div class="chooseM-item" style="display: flex">
                      <div class="chooseM-item-title">分组名称:</div>
                      <div class="chooseM-item-input">
                        <input type="text" placeholder="请输入分组名称" />
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="分辨率">
                    <el-select
                      class="chooseM-fenbian"
                      v-model="state.form.region"
                      placeholder="请输入"
                    >
                      <el-option label="全部分辨率" value="all"></el-option>
                      <el-option label="1920x1080" value="1910"></el-option>
                      <el-option label="1080x1920" value="1019"></el-option>
                      <el-option label="3840x2160" value="3821"></el-option>
                      <el-option label="2160x3840" value="2138"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div class="chooseM-button">
                  <button class="chooseM-button-item1">重 置</button>
                  <button class="chooseM-button-item2">查 询</button>
                </div>
                <br />
              </div>
              <!-- 设备列表 -->
              <div>
                <el-table
                  :data="state.mechanismList"
                  style="width: 99%; margin-left: 0.5%; margin-top: -20px"
                  size="default"
                  class="el-table"
                  ref="multipleTable"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="40">
                  </el-table-column>
                  <el-table-column prop="Name" label="设备名称" width="200" />
                  <el-table-column prop="Mac" label="MAC地址" width="200" />
                  <el-table-column prop="size" label="分辨率" width="200" />
                  <el-table-column
                    prop="OrganizationID"
                    label="所属机构"
                    width="200"
                  />
                  <el-table-column prop="plan" label="当前计划" width="" />
                  <el-table-column prop="State" label="设备状态" width="120" />
                </el-table>
              </div>
            </div>
            <br />
            <!-- 表单按钮 -->
            <div class="dialog-footer">
              <el-button @click="state.dialogFormVisible = false"
                >返 回</el-button
              >
              <el-button type="primary" @click="saveGroup">保 存</el-button>
            </div>
          </el-dialog>
        </div>
      </div>

      <div>
        <el-table
          :data="state.groupList"
          style="width: 100%"
          size="default"
          class="el-table"
          :header-cell-style="{ background: 'rgb(35, 39, 56)' }"
          :cell-style="{ background: 'rgb(41, 45, 62)', color: '#fff' }"
        >
          <el-table-column prop="ID" label="分组ID" width="230" />
          <el-table-column prop="Name" label="分组名称" width="270" />
          <el-table-column prop="OrganizationID" label="所属机构" width="270" />
          <!-- <el-table-column prop="number" label="设备数量" width="180" /> -->
          <el-table-column prop="Describe" label="描述" width="220" />
          <el-table-column prop="do" label="操作" width="">
            <template #default="scope">
              <button @click="infoGroup(scope.$index, scope.row)" class="btns">
                详情
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                编辑
              </button>
              <button
                @click="deleteGroups(scope.$index, scope.row)"
                class="btns"
              >
                删除
              </button>
              <div>
                <el-dialog
                  title="提示"
                  v-model="state.isDelete"
                  width="30%"
                  :before-close="handleClose"
                >
                  <div>确定删除该设备</div>
                  <div style="margin-left: 70%">
                    <el-button @click="noDelete">取 消</el-button>
                    <el-button
                      type="primary"
                      @click="yesDelete(scope.$index, scope.row)"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getGroup,
  getMechanism,
  addGroup,
  deleteGroup,
  getGroupMechanism,
} from "../../axios/device";
const state = reactive({
  mechanism: ["城院罗老师测试"],
  dialogFormVisible: false,
  form: {
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
  },
  groupList: [], //分组列表，取数据库
  mechanismList: [], //设备列表，从数据库取的
  chosenMachine: [],
  chosenId: [],
  isDelete: false, //确认删除弹窗
  deleteG: false, //确认删除
});
onMounted(() => {
  getMechanismList();
  getGroupList();
});
// 接口功能函数
//分组详情
const infoGroup = (index, row) => {
  console.log(row);
  getGroupMechanism(index).then((res) => {
    console.log(res);
    // state.infomecha = true;
    // state.infoMechaList = res.data;
    // console.log(state.infoMechaList);
    // state.infoMechaList.CreatedAt = moment(
    //   state.infoMechaList.CreatedAt
    // ).format("YYYY-MM-DD HH:mm:ss");
    // state.infoMechaList.LastHeartbeat = moment(
    //   state.infoMechaList.LastHeartbeat
    // ).format("YYYY-MM-DD HH:mm:ss");
  });
};
//删除分组
const noDelete = () => {
  state.isDelete = false;
  state.deleteG = false;
};
const yesDelete = (index, row) => {
  state.isDelete = false;
  state.deleteG = true;
  console.log(state.deleteG);
  if (state.deleteG == true) {
    deleteGroup(row.ID).then((res) => {
      console.log(res);
      if (res.code == 200) {
        getGroup("0", "100").then((res) => {
          console.log(res);
          state.groupList = res.data.groups;
          console.log(state.groupList);
        });
      }
    });
  }
};
const deleteGroups = (index, row) => {
  console.log(row.ID);
  state.isDelete = true;
};
// 获取分组列表
const isselect = ref(null);
const toggleSelection = (rows) => {
  console.log(rows);
};
//保存
const saveGroup = () => {
  // console.log(isselect.value);
  // $refs.isselect.selection;
  console.log(state.form.name);
  console.log(state.form.desc);
  console.log(state.chosenMachine);
  state.chosenId = state.chosenMachine.map((item) => {
    item.ID;
  });
  addGroup(
    state.form.name.toString(),
    state.form.desc.toString(),
    state.chosenId
  ).then((res) => {
    console.log(res);
    if (res.code == 200) {
      state.dialogFormVisible = false;
      window.location.replace("/teammanager");
    }
  });
};
const handleSelectionChange = (val) => {
  console.log(val);
  state.chosenMachine = val;
};
const getGroupList = () => {
  getGroup("0", "100").then((res) => {
    console.log(res);
    state.groupList = res.data.groups;
    console.log(state.groupList);
  });
};
const goAddGroup = () => {
  state.dialogFormVisible = true;
  console.log(state.dialogFormVisible);
};
// 获取设备列表
const getMechanismList = () => {
  // var _stata = state;
  getMechanism("0", "1").then((res) => {
    console.log(res);
    state.mechanismList = res.data.devices;
    for (let i = 0; i < state.mechanismList.length; i++) {
      state.mechanismList[i].OrganizationID = "test_o";
      state.mechanismList[i].group = "-";
      state.mechanismList[i].size = "1920x1080（横）";
      state.mechanismList[i].UpdatedAt = "已是最新";
    }
  });
};
const addGroupTable = [
  {
    name: "测试误删",
    mac: "A0BB3ED2F376",
    size: "1920x1080（横）",
    mechanism: "城院罗老师测试",
    plan: "-",
    state: "·  离线",
  },
];
const tableData = [
  {
    id: 10441,
    name: "分组1",
    mechanism: "城院罗老师测试",
    number: "1个",
    des: "-",
  },
  {
    id: 10440,
    name: "轮播测试",
    mechanism: "城院罗老师测试",
    number: "0个",
    des: "qewqeq",
  },
  {
    id: 10437,
    name: "123",
    mechanism: "城院罗老师测试",
    number: "0个",
    des: "-",
  },
];
</script>

<style lang="less" scoped>
.header {
  width: 99%;
  height: 80px;
  background-color: rgb(41, 45, 62);
  margin-left: 0.5%;
  display: flex;
  // justify-content: space-between;
  &-item {
    margin-left: 40px;
    &-title {
      line-height: 80px;
      color: #fff;
      margin-left: 25px;
      font-size: 14px;
    }
    &-input input {
      width: 180px;
      height: 25px;
      margin-top: 28px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
      background-image: url(../../assets/program/search.svg);
      background-repeat: no-repeat;
      background-size: 15px 15px;
      background-position: 170px;
    }
    &-select select {
      width: 180px;
      height: 28px;
      margin-top: 25px;
      margin-left: 10px;
      background-color: rgb(35, 39, 56);
      border: none;
      color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
    }
  }

  &-button {
    margin-left: 37%;
    margin-top: 22px;
    &-item1 {
      width: 70px;
      height: 35px;
      border: none;
      border-radius: 1px;
    }
    &-item2 {
      width: 70px;
      height: 35px;
      margin-left: 10px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
  }
}
.content {
  width: 99%;
  margin-left: 0.5%;
  height: 585px;
  background-color: rgb(41, 45, 62);
  margin-top: 20px;

  &-btn {
    height: 50px;
    display: flex;
    margin-top: 15px;
    margin-right: 30px;
    float: right;

    &-item1 .bbb {
      width: 80px;
      height: 35px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
    &-img1 img,
    &-img2 img {
      width: 20px;
      height: 20px;
    }
    &-img1,
    &-img2 {
      margin-left: 20px;
      margin-top: 6px;
    }
  }
}
.btns {
  border: none;
  background: none;
  color: rgba(0, 98, 255, 0.83);
  font-size: 14px;
}
.el-form .el-form-item .el-input {
  width: 330px;
}
.el-form .el-form-item .des {
  width: 630px;
}
.el-form .el-form-item .el-select {
  width: 360px;
}
.chooseM {
  margin-top: -15px;
  width: 99%;
  // height: 200px;
  border: solid 1px rgb(217, 217, 217);
  // display: flex;
  // .el-form-item {
  //   width: 260px;
  //   margin-top: 20px;
  //   margin-left: 40px;
  // }
  &-item {
    margin-left: 25px;
    margin-top: -5px;
    &-title {
      line-height: 80px;
      // color: #fff;
      // margin-left: 25px;
      font-size: 14px;
      margin-top: 5px;
    }
    &-input input {
      width: 200px;
      height: 25px;
      margin-top: 30px;
      margin-left: 10px;
      // background-color: rgb(35, 39, 56);
      border: solid 1px rgb(217, 217, 217);
      // color: #fff;
      padding-left: 10px;
      outline-color: rgb(24, 144, 255);
      background-image: url(../../assets/program/search.svg);
      background-repeat: no-repeat;
      background-size: 15px 15px;
      background-position: 170px;
    }
    // .el-form .el-form-item .el-select {
    //   width: 20px;
    // }
  }
  &-button {
    // margin-left: 15%;
    margin-top: 22px;
    &-item1 {
      width: 70px;
      height: 35px;
      border: solid 1px rgb(217, 217, 217);
      background-color: #fff;
      border-radius: 1px;
    }
    &-item2 {
      width: 70px;
      height: 35px;
      margin-left: 10px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
  }
}
.dialog-footer {
  // float: right;
  // margin-bottom: 20px;
  margin-left: 85%;
  margin-top: 10px;
}
</style>